<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			.skyblue {
				background-color: skyblue;
			}
		</style>
		<div id="app">
			<button @click="add()">添加一条新的访客信息</button>
		<button @click="delall()">删除选中</button>
		<button @click="sort()">从小到大</button>
		<button @click="alls()">一键选中</button>
		<button @click="inverse1()">反选</button>
		<select name="" v-model="opt">
				<option value="时兴装饰">时兴装饰</option>
				<option value="雅玥园林">雅玥园林</option>
				<option value="alls">全部</option>
			</select>
		<!--<button class="antitone">序列号反序</button>-->
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>序列号</th>
				<th>ID号</th>
				<th>工作地点</th>
				<th>职位名称</th>
				<th>招聘数量</th>
				<th>招聘时间</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
			<tr v-for="(item,index) in ress" v-if="opt==item.ch_area_name||opt=='alls'" v-bind:class="[inp_check.indexOf(index)>-1?classobj:'']">
				<td>{{index}}</td>
				<td>{{item.id}}</td>
				<td>{{item.ch_area_name}}</td>
				<td>{{item.ch_name}}</td>
				<td>{{item.num}}</td>
				<td>{{format(item.time)}}</td>
				<td><button @click="del(index)">删除</button></td>
				<td><input type="checkbox"  v-model="inp_check" :value="index" /></td>
			</tr>
		</table>
		
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var res,ks;
			$.ajax({
				type:"get",
				url:"http://www.agilebuild.com.cn/api/Recruitment/get_recruitment_list",
				async:true,
				data:{
					list_id:2,
					page:1,
				},
				success:function (res){
					srll(res);
				},
			});
			var a=0;
			function srll(result){
				new Vue({
				el:"#app",
				data:{
					ress:[],
					inp_check:[],
					melon:[],
					opt:"alls",
					classobj:"skyblue",
					
				},
				methods:{
					del:function(index){
						var arr=[];
							for(var i = 0; i < this.inp_check.length; i++) {
								if(this.inp_check[i]>index){
									arr.push(this.inp_check[i]-1);
								}else if(this.inp_check[i]<index){
									arr.push(this.inp_check[i]);
								}
							}
							this.inp_check=arr;
						this.ress.splice(index,1)
					},
					add:function(){
						this.ress.push((result.data)[a]),
						++a>=result.data.length?a=0:"";
					},
					delall:function(){
						this.inp_check.sort(function(a,b){
							return a-b;
						})
						for(var i=0;i<this.inp_check.length;i++){
						this.ress.splice(this.inp_check[i]-i,1)
						}
						this.inp_check=[]
					},
					alls:function(){
						for(var i=0;i<this.ress.length;i++){
						this.inp_check.push(i)
						}
					},
					inverse1:function(){
						this.melon=[]
						for(var i=0;i<this.ress.length;i++){
							if(this.inp_check.indexOf(i)==-1){
								this.melon.push(i);
							}
						}
						this.inp_check=this.melon
					},
					sort:function(){
						console.log(this.ress[0].id)
						this.ress.sort(function(a,b){
							return a.id-b.id;
						})
					},
					format:function(time){
						var time=new Date(time*1000);
						return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();	
					}
				},
			})
			}
		</script>
	</body>
</html>
